<template>
  <div class="special-table">
    <!-- <div class="list-wrap">
      <header>
        <el-row style="width: 100%">
          <el-col :span="4">提交者账户信息</el-col>
          <el-col :span="6">备注信息</el-col>
          <el-col :span="3" style="text-align: center">一级分类</el-col>
          <el-col :span="2" style="text-align: center">二级分类</el-col>
          <el-col :span="2" style="text-align: center">三级分类</el-col>
          <el-col :span="3" style="text-align: center">状态</el-col>
          <el-col :span="4" style="text-align: center">操作</el-col>
        </el-row>
      </header>
      <div class="data-list">
        <div class="data-list-item" v-for="(item, index) in tableData" :key="index">
          <p>
            <span>提交编码：{{ item.orderNo }}</span>
            <span>{{ item.createTime }}</span>
          </p>
          <el-row style="width: 100%">
            <el-col :span="4">
              <div class="info">
                <img v-if="item.avatar" :src="item.avatar" alt="" />
                <span v-else>img</span>
                <div>
                  <span>账户电话</span>
                  <p>{{ item.mobile }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <p class="tips">
                {{ item.remark }}
              </p>
            </el-col>
            <el-col :span="3" class="text-center">
              <b>{{ item.categoryName }}</b>
            </el-col>
            <el-col :span="2" class="text-center">
              <span>-待审核后添加-</span>
            </el-col>
            <el-col :span="2" class="text-center">
              <span>-待审核后添加-</span>
            </el-col>
            <el-col :span="3" class="text-center">
              <div>
                <el-tag v-if="item.auditStauts === 1" type="warning">待审批</el-tag>
                <el-tag v-else-if="item.auditStauts === 2">已审核</el-tag>
                <el-tag v-else type="info">已撤销</el-tag>
              </div>
            </el-col>
            <el-col :span="4" class="text-center">
              <div>操作按钮</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div> -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="45" />
      <el-table-column prop="img" label="商品图" width="80" />
      <el-table-column label="商品信息" width="240">
        <template #default>
          <div class="f12" style="color: #86909c">
            <span>xxxxx浙江义乌新款墙饰</span>
            <p>上架类目：成品>客厅家具>小家电</p>
            <p>型号：衣柜环保EO级SKL双饰面</p>
            <p>分类：A</p>
            <p>ID：598595310</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="库存" />
      <el-table-column prop="brand" label="品牌" />
      <el-table-column prop="sku" label="sku数" />
      <el-table-column prop="price" label="价格" />
      <el-table-column prop="upTime" label="上架日期" />
      <el-table-column prop="salesNum" label="实际销量" />
      <el-table-column prop="status" label="状态">
        <template #default>
          <el-tag type="primary">首次审批</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <div class="btn-wrap">
          <el-button type="primary" link>日志</el-button>
        </div>
      </el-table-column>
    </el-table>

    <div class="mt20" style="display: flex; justify-content: flex-end">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="pagination.pageSizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const tableData = ref([
  { img: "xxx", total: 100, brand: "品牌", sku: 5, price: 600, upTime: "2024-02-02", salesNum: 22, status: 1 },
  { img: "xxx", total: 100, brand: "品牌", sku: 5, price: 600, upTime: "2024-02-02", salesNum: 22, status: 1 },
  { img: "xxx", total: 100, brand: "品牌", sku: 5, price: 600, upTime: "2024-02-02", salesNum: 22, status: 1 },
  { img: "xxx", total: 100, brand: "品牌", sku: 5, price: 600, upTime: "2024-02-02", salesNum: 22, status: 1 },
  { img: "xxx", total: 100, brand: "品牌", sku: 5, price: 600, upTime: "2024-02-02", salesNum: 22, status: 1 },
  { img: "xxx", total: 100, brand: "品牌", sku: 5, price: 600, upTime: "2024-02-02", salesNum: 22, status: 1 },
  { img: "xxx", total: 100, brand: "品牌", sku: 5, price: 600, upTime: "2024-02-02", salesNum: 22, status: 1 },
  { img: "xxx", total: 100, brand: "品牌", sku: 5, price: 600, upTime: "2024-02-02", salesNum: 22, status: 1 }
]);
const pagination = ref({
  currentPage: 1,
  pageSize: 5,
  pageSizes: [5, 10, 20, 30, 40, 50],
  total: 0
});

onMounted(() => {
  pagination.value.total = tableData.value.length;
});

const handleSizeChange = val => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = val => {
  console.log(`current page: ${val}`);
};
</script>

<style lang="scss" scoped>
.list-wrap {
  header {
    margin-top: 30px;
    background-color: #f2f6fc;
    height: 50px;
    line-height: 50px;
    padding: 0 0 0 18px;
    font-size: 14px;
    color: #4e5969;
  }
  .data-list {
    font-size: 12px;
    .data-list-item {
      border: 1px solid #e1e6ed;
      margin-top: 10px;
      & > p {
        padding: 0 18px;
        background-color: #e1e6ed;
        display: flex;
        line-height: 40px;
        height: 40px;
        color: #86909c;
        display: flex;
        justify-content: space-between;
      }
      .el-row {
        padding: 0 0 0 18px;
        .el-col {
          padding: 16px 0;
          color: #86909c;
          display: flex;
          align-items: center;
          &.text-center {
            justify-content: center;
          }
          &:not(:last-of-type) {
            border-right: 1px solid #e1e6ed;
          }
        }
        b {
          color: #3d3d3d;
        }
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .tips {
          padding: 0 10px;
        }
        .info {
          display: flex;
          align-items: center;
          font-size: 14px;
          width: 100%;
          & > div {
            flex-grow: 1;
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          span {
            color: #86909c;
          }
          p {
            color: black;
            line-height: 24px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
